Margin Collapsing

最終計算結果會只留下較大邊的margin，造成margin collapsing

「相鄰」

1. 於同一層內相鄰時，設定margin造成的上下margin相鄰

2. 父元素與第一個子元素或最後一個子元素，設定margin造成的上下margin相鄰

3. 兩個元素之間存在空元素時，此兩個元素設定margin造成的上下margin相鄰

code:html

<!-- 兩個元素的 margin 會重疊，實際上只剩下 16px 的 margin -->

<section>

<!-- 同一層內相鄰 -->

<div class="block mb-16">margin-bottom: 16px</div>

<div class="block mt-16">margin-top: 16px</div>

<!-- 父元素與子元素 -->

<div class="block mb-16 mt-16">

<div class="block mt-16">parent and child both margin-top: 16px</div>

<div class="block mb-16">parent and child both margin-bottom: 16px</div>

</div>

<!-- 中間存在空元素 -->

<div class="block mb-16">margin-bottom: 16px</div>

<div></div>

<div class="block mt-16">margin-top: 16px</div>

</section>

<style>

.mt-16 {

margin-top: 16px;

}

.mb-16 {

margin-bottom: 16px;

}

</style>

解決方式

通用解

發生於兄弟身上時則指其共通的父元素

於父子身上時則指該父元素

第2種情況

不會發生margin collapsing的情況

水平相鄰的元素

左右margin

root元素